<template>
  <button @click="addAddfn">加一</button>
  <div>呵呵{{ age }}</div>
</template>
<script lang="ts" setup name="person">
// vue生命周期是自上而下执行的，因此先执行子组件的生命周期 最后执行父组件的生命周期
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

let age = ref(15);
function addAddfn() {
  age.value = age.value + 1;
  console.log("666", age);
}
console.log("创建", "setup代替了vue2之前的两个钩子");
onBeforeMount(() => {
  console.log("挂载前");
});
onMounted(() => {
  console.log("挂载完成");
});
onBeforeUpdate(() => {
  console.log("更新前");
});
onUpdated(() => {
  console.log("更新完成");
});
onBeforeUnmount(() => {
  console.log("卸载前");
});
onUnmounted(() => {
  console.log("卸载完成");
});
</script>